<template>
  <el-dialog
    :title="!dataForm.id ? '新增' : '修改'"
    :close-on-click-modal="false"
    :visible.sync="visible"
    width="70%">
    <xkl-form ref="xklForm" :data-form="dataForm" :data-form-config="dataFormConfig" :data-rule="dataRule">
      <!--元素将插入至slot指定字段之后，参考模板：<template slot="carrierCode"><el-col></el-col></template>-->
    </xkl-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
  export default {
    components: {},
    data () {
      return {
        visible: false,
        roleList: [],
        clickFlag: true,
        dataForm: {
          id: 0,
          test1: '',
          test2: '',
          test3: '',
          test4: '',
          test5: ''
        },
        dataFormConfig: {
          /** baseConfig 用于配置表单基本结构，
           ...其余参数满足以下下规则：
           字段名称: {
             label: 字段label名称,
             placeholder: 若不填则默认为label名称,
             type: 输入框类型,可选值（'select', 'date-时间框类型 如：date-year'）
             config: 输入框类型为下拉框时配置生效，其中参数为{selectType: 字典类型, keyType: value取值, labelType: label取值, link: 下拉框接口地址}
             additionalData: 下拉框传送额外参数
             maxLength: 可输入最大长度
             isRequired: 是否必填
             disabled: 是否禁用
             span: 自定义span大小，默认为baseConfig中的span值
           }
           列表排列顺序为字段排列顺序 */
          baseConfig: {span: 8, labelWidth: 100},
          test1: {label: '测试1', maxLength: 8, isRequired: true},
          test2: {label: '测试2', maxLength: 8, isRequired: true},
          test3: {label: '测试3', maxLength: 8},
          test4: {label: '测试4', maxLength: 8},
          test5: {label: '测试5', maxLength: 8}
        },
        dataRule: {
        }
      }
    },
    watch: {
    },
    methods: {
      init (id) {
        this.dataForm.id = id || 0
        this.visible = true
        this.$nextTick(() => {
          this.$refs['xklForm'].$refs['dataForm'].resetFields()
          if (this.dataForm.id) {
            this.$http({
              url: this.$http.adornUrl('/test/test/info'),
              method: 'get',
              params: this.$http.adornParams()
            }).then(({data}) => {
              if (data && data.code === 0) {
                Object.keys(this.dataForm).forEach(item => {
                  if (item !== 'id') this.dataForm[item] = data.testList[item]
                })
                this.changeData(data.testList)
              }
            })
          }
        })
      },
      changeData () {
        // 自定义数据展示形式
      },
      // 表单提交
      dataFormSubmit () {
        if (!this.clickFlag) return
        this.clickFlag = false
        setTimeout(() => { this.clickFlag = true }, 3000)
        this.$refs['xklForm'].$refs['dataForm'].validate((valid) => {
          if (valid) {
            let handleData = this.handleDataForm()
            this.$http({
              url: this.$http.adornUrl(`/test/${!this.dataForm.id ? 'save' : 'update'}`),
              method: 'post',
              data: this.$http.adornData({
                'id': this.dataForm.id || undefined,
                ...handleData
              })
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                    this.visible = false
                    this.$emit('refreshDataList')
                    this.clickFlag = true
                  }
                })
              } else {
                this.$message.error(data.message)
              }
            })
          }
        })
      },
      handleDataForm () {
        let handleData = JSON.parse(JSON.stringify(this.dataForm))
        // 处理要传递的数据
        // 例： handleData.testField = this.$formatDate(this.dataForm.testField, '-')
        // 返回已处理的数据
        return handleData
      }
    }
  }
</script>

